<template>
  <div class="slider-wrapper" v-if="images.length">
    <div class="slider">
      <div class="item-big" v-for="(item, index) in images" :class="{active:index === nowIndex}" :key="index">
        <img class="small" @load="loadImg" :src="item.src" alt="Shop Meet50off">
      </div>
    </div>
    <div class="status">
      <div class="dot-wrapper" ref="sliderGroup">
        <div>
          <div class="dot-content">
            <div class="item-small" ref="slider" v-for="(item, index) in images" @click="selectChange(index)" :key="index" :class="index === nowIndex ? 'active' : ''">
              <img :src="item.src">
            </div>
          </div>
        </div>
      </div>
      <div class="btn-wrapper">
        <div class="prev-btn btn" @click="prev"><</div>
        <div class="next-btn btn" @click="next">></div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {prefixStyle,addClass} from 'common/js/dom'
  const transform = prefixStyle('transform')
  const singleWidth = 50
  export default {
    props: {
      images: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data (){
      return {
        nowIndex: 0,
      }
    },
    mounted() {
      setTimeout(() => {
        this._sliderWidth()
      }, 20)
    },
    methods: {
      prev () {
        if(this.nowIndex > 0){
          this.nowIndex--
        }else{
          this.nowIndex = 0
        }
        this.change()
      },
      next () {
        const len = this.images.length
        if(this.nowIndex < len - 1){
          this.nowIndex++
        }else{
          this.nowIndex = len - 1
        }
        this.change()
      },
      loadImg() {
        if (!this.firstLoad) {
          this.firstLoad = false
          this._sliderWidth()
        }
      },
      _sliderWidth() {
        let width = this.images.length * singleWidth
        $('.dot-content').css('width', width + 'px')
      },
      selectChange(index) {
        this.nowIndex = index
        this.change()
      },
      change() {
        if (this.nowIndex >= 12) {
          let left = (this.nowIndex - 12) * 50 +'px'
          document.querySelector('.dot-content').style[transform] = `translateX(-${left})`
        } else {
          document.querySelector('.dot-content').style[transform] = `translateX(0)`
        }
      }
    },
    watch: {
      images() {
        this._sliderWidth()
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

    .slider-wrapper
      position:relative
      width: 695px
    .slider
      position: relative
      width: 695px
      height: 406px
      overflow: hidden
      .item-big
        position: absolute
        height: 100%
        text-align: center
        transition: all 1.5s
        opacity: 0
        width: 100%
        img
          height: 100%
      .active
        opacity: 1
    .status
      position: relative
      margin-top: 20px
      height: 52px
      overflow: hidden
      .dot-wrapper
        display: table
        margin: 0 auto
        > div
          max-width: 650px
          overflow: hidden
          .dot-content
            transition: all .5s
            transform: translateX(0)
        .item-small
          width: 50px
          height: 50px
          display: inline-block
          cursor: pointer
          padding: 0 6px
          box-sizing: border-box
          text-align: center
          img
            height: 100%
            max-width: 100%
        .active
            border: 2px solid #18823a
      .btn
        position:absolute
        top:50%
        height:40px
        width:20px
        line-height:40px
        color:#fff
        text-align:center
        background:rgba(10, 10, 10, .85)
        transform:translateY(-50%)
        cursor:pointer
      .next-btn
        right:0

</style>
